<template>
  <div style="height: 100%; ">
    <!--工作区-->
    <el-container
      ref="listWarp"
      style="height: 100%;background-color:#fff;"
      v-loading="loading"
      :element-loading-text="loadingText"
    >
      <el-header class="toolbar-wap" style="height:45px">
        <!--工具条按钮-->
        <tool-button
          v-for="button in toolButtons"
          :key="button.text"
          :text="button.text"
          :icon="button.icon"
          :disabled="button.disabled"
          :right-line="button.rightLine"
          :left-line="button.leftLine"
          :title="button.title"
          @buttonClick="toolButtonClick"
        />
      </el-header>
      <el-main style="height: 100%; " class="page-main">
        <el-table
          ref="dataListTable"
          :data="dataList"
          highlight-current-row
          border
          tooltip-effect="light"
          height="100%"
          style="width: 100%;"
          @row-dblclick="evtTableRowdblclick"
          @current-change="evtTableRowChange"
          @selection-change="evtTableSelectionChange"
        >
          <!--序号-->
          <el-table-column
            type="index"
            align="center"
            label="行"
            fixed
            class-name="table-index"
            width="49"
          />

          <!--绑定列-->
          <el-table-column
            v-for="col in columns.filter(item => item.visible)"
            :prop="col.prop"
            :label="col.label"
            :sortable="col.sortable ? 'custom' : col.sortable"
            :resizable="col.resizable"
            :show-overflow-tooltip="col.tooltip"
            :align="col.align"
            :width="col.width"
            :fixed="col.fixed"
            :key="col.prop"
          />
        </el-table>
      </el-main>
    </el-container>
    <!--编辑-->
    <editDatabase ref="editDialog" @save="funLoadData" />
  </div>
</template>

<script>
import toolButton from "@/itsoftUI/components/toolbar/toolbutton";
import { apiDatabase } from "@/api/etl/database";
import editDatabase from "@/views/etl/database/edit";

export default {
  name: "DatabaseList",
  components: { toolButton, editDatabase },

  data() {
    return {
      loading: false, //加载进度
      loadingText: "加载中",
      //工具按钮数组
      toolButtons: [
        { text: "刷新", icon: "refresh", rightLine: true,leftLine:true },
        { text: "新增", auth: "050101", icon: "add" },
        { text: "编辑", auth: "050102", icon: "edit", rightLine: true },
        { text: "删除", auth: "050103", icon: "delete" }
      ],
      dataList: [],
      defaultOrder: null, //默认排序
      selectRows: [], // 多选行
      //列
      columns: [
        {
          prop: "databaseId",
          visible: false
        },
        {
          prop: "name",
          label: "连接名称",
          sortable: true,
          width: "auto",
          visible: true,
          fixed: false,
          tooltip: false
        },
        {
          prop: "databaseType",
          label: "类型",
          sortable: false,
          width: "180",
          visible: true,
          fixed: false,
          tooltip: false
        },
        {
          prop: "hostName",
          label: "连接方式",
          sortable: false,
          width: "120",
          visible: true,
          fixed: false,
          tooltip: false
        },

        
      ],
      currentRow: null, //当前选中行
      editID: "0",
      dialogTitle: ""
    };
  },
  methods: {
    //工具条按钮点击事件
    toolButtonClick(text) {
      switch (text) {
        case "刷新":
          this.funLoadData();
          break;
        case "新增":
          this.funEdit(null);
          break;
        case "编辑":
          if (this.currentRow) {
            this.funEdit(this.currentRow);
          } else {
            return;
          }

          break;
        case "删除":
          this.funDelete();
          break;
      }
    },

    evtTableRowdblclick() {
      //双击行
      this.funEdit(this.currentRow);
    },
    evtTableRowChange(currentRow) {
      //单选行
      this.currentRow = currentRow;
    },
    evtTableSelectionChange(selection) {
      //多选行
      this.selectRows = selection;
    },
    //加载数据
    funLoadData() {
      this.loading = true;
      //加载数据
      this.loadingText = "数据加载中...";
      apiDatabase
        .getList()
        .then(res => {
          this.dataList = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    funEdit(val) {
      if (val) {
        // let edit = this.toolButtons.filter(item => item.auth === "050102");
        // if (edit && edit.length > 0 && edit[0].disabled) return false;
        this.editID = val.databaseId;
        this.dialogTitle = "编辑数据库连接-" + val.name;
      } else {
        // let edit = this.toolButtons.filter(item => item.auth === "050101");
        // if (edit && edit.length > 0 && edit[0].disabled) return false;
        this.dialogTitle = "新增数据库连接";
        this.editID = "0";
      }
      this.$refs.editDialog.dialogEdit(this.editID, this.dialogTitle);
    },
    funDelete() {
      let that = this;
      let deleteRows = this.currentRow;
      if (!deleteRows) {
        this.$message.error("请选择要删除的数据行");
        return;
      }
      this.$confirm("确定要删除当前选中的数据吗？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.loadingText = "数据正在删除...";
          apiDatabase
            .delete(deleteRows.databaseId)
            .then(() => {
              this.loading = false;
              this.$message.success("删除成功");
              this.funLoadData()
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$refs.dataListTable.clearSelection();
        });
    }
  },
  created() {
    //加载数据
    this.funLoadData();
  }
};
</script>

<style scoped></style>
